import React, { Component } from 'react'
import style from '../Login.module.less'
import {toast} from "react-toastify";
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input } from 'antd';
import {Link, withRouter} from 'react-router-dom'
import {SignInRequest} from "@requests/auth";
import {connect} from "react-redux";
import {saveUserCreator} from "@creators/userCreator";
class Signin extends Component {
    state ={
        user:{
            username:'',
            password:'',
            allow:false
        },
        signInRequestState:'idle',
        signInRequestError:null
    }
    更新表单状态
    updateFormState =(event) => {
        // toast.success("登录成功", { position: "top-center", autoClose: 1000 });

        this.setState({
            users : {
                ...this.state.users,

                [event.target.name] : event.target.name === 'allow' ? event.target.checked : event.target.value
            }
        })
    }
    onFinish = async (values) => {
        console.log(values)
        if(values.remember === false) return toast.warn('请勾选用户协议', {
            position: "top-center",
            autoClose: 3000,
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: true,
            draggable: true,
            progress: undefined,
            theme: "light",
        })
        if(this.state.signInRequestState === 'loading') return
        this.setState({
            signInRequestState:'loading',
            signInRequestError:null
        })
        try{
            let response = await SignInRequest(values)
            this.setState({
                signInRequestState:'success',
                signInRequestError:null
            })
            if(response.code === 400 ){
                return toast.warn(response.errmsg, {
                    autoClose: 1000,
                })
            }
            toast.success("登录成功", {
                // 自定关闭事件
                autoClose: 1000
            });
            this.props.dispatch(saveUserCreator(response.user));
            sessionStorage.setItem("user",JSON.stringify(response.user));
            this.props.history.replace('/')
        }
         catch (error){
            this.setState({
                signInRequestState:'Error',
                signInRequestError:error
            })
            return
        }
    };
    render() {
        const { onChangPage } = this.props

        return (
            <div className={style.littleBox} style={{ paddingTop: '5%' }} >
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{ remember: true }}
                    onFinish={this.onFinish}
                >
                    {/*{％csrf_token％}*/}
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: '请输入用户名/手机号！' }]}
                        // style={{ width: '20vw' }}
                        className={style.aaaa}
                    >
                        <Input name='username' prefix={<UserOutlined className="site-form-item-icon" />}  placeholder="用户名/手机号"  onChange={this.updateFormState} value={this.state.user.username}  />
                    </Form.Item>
                    <Form.Item
                        className={style.aaaa}
                        name="password"
                        rules={[{ required: true, message: '请输入密码!' }]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="请输入密码"
                            value = {this.state.user.password}
                            name='password'
                            onChange={this.updateFormState}
                        />
                    </Form.Item>
                    <Form.Item>
                        <Form.Item name="remember" valuePropName="checked" noStyle>
                            <Checkbox name='allow' checked={this.state.user.allow} onChange={this.updateFormState}>用户隐私协议</Checkbox>
                        </Form.Item>
                        <Link className="login-form-forgot" to='/Forget'>忘记密码</Link>
                    </Form.Item>

                    <Form.Item>
                        <button style={{ width: "20vw", display: 'block', margin: "0 auto", marginBottom: '5px' ,border:0,backgroundColor:'rgb(64,150,255)',color : 'white' ,height : '2vw',borderRadius:'5px' }} type="primary"  className="login-form-button">
                            立即登录
                        </button>
                        <a onClick={onChangPage} name='Sign_in'>现在注册!</a>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}
export default  connect()(withRouter(Signin))
